<template>
  <div class="body-box">
    <window-title title="标准项"></window-title>
    <div class="com-list">
      <el-button v-for="(item,key) in tag_list" :key="key" size="small" :class="item.select ? 'tag-btn com-btn' : 'tag-btn'" @click="selectCom(key)">{{item.name}}</el-button>
    </div>
    <window-title title="自定义项"></window-title>
    <div class="com-list">
      <el-button v-for="(item,key) in diy_tag" :key="key" size="small" class='tag-btn' @click="selectDiy(key)">{{item.name}}</el-button>
    </div>
  </div>
</template>

<script>
import windowTitle from "./title.vue";

export default {
  components: { windowTitle },
  props:{select : {}},
  data() {
    return {
      tag_list: [
        {name: "身份证",not_null: false,type: "text",select:false,is_diy:false,data:[]},
        {name: "国籍",not_null: false,type: "text",select:false,is_diy:false,data:[]},
        {name: "性别",not_null: false,type: "radio",select:false,is_diy:false,data:[{value:1,label:'男'},{value:2,label:'女'}]},
        {name: "出生日期",not_null: false,type: "date",select:false,is_diy:false,data:[]},
        {name: "职业",not_null: false,type: "text",select:false,is_diy:false,data:[]},
        {name: "邮箱",not_null: false,type: "text",select:false,is_diy:false,data:[]},
        {name: "血型",not_null: false,type: "text",select:false,is_diy:false,data:[]},
        {name: "学历",not_null: false,type: "select",select:false,is_diy:false,data:[{value:1,label:'小学'},{value:1,label:'初中'},{value:1,label:'高中'},{value:1,label:'专科'},{value:1,label:'本科'},{value:1,label:'硕士'},{value:1,label:'博士'}]},
        {name: "联系地址",not_null: false,type: "text",select:false,is_diy:false,data:[]},
        {name: "是否通过体检",not_null: false,type: "radio",select:false,is_diy:false,data:[{value:1,label:'是'},{value:2,label:'否'}]},
        {name: "政治面貌",not_null: false,type: "text",select:false,is_diy:false,data:[]},
      ],
      diy_tag:[
          {name : '单行文本框',data:{name: "单行文本框",not_null: false,type: "text",select:false,is_diy:true,data:[]}},
          {name : '多行文本框',data:{name: "多行文本框",not_null: false,type: "textarea",select:false,is_diy:true,data:[]}},
          {name : '数字文本框',data:{name: "数字文本框",not_null: false,type: "number",select:false,is_diy:true,data:[]}},
          {name : '下拉选择框',data:{name: "下拉选择框",not_null: false,type: "select",select:false,is_diy:true,data:[{value:1,label:'选项'}]}},
          {name : '日期',data:{name: "日期",not_null: false,type: "date",select:false,is_diy:true,data:[]}},
          {name : '图片',data:{name: "图片",not_null: false,type: "image",select:false,is_diy:true,data:[]}},
      ]
    };
  },
  mounted(){
    this.checkInArr();
  },
  methods:{
    selectCom(key){
      var form = this.tag_list[key];
      if(form.select)return false;
      this.$parent.changeForm(form);
    },
    selectDiy(key){
      var form = this.diy_tag[key].data;
      if(form.select)return false;
      this.$parent.changeForm(form);
    },
    //判断数组中是否存在
    checkInArr(){
      for(var i in this.tag_list){
        for(var y in this.select) {
          if(this.tag_list[i].name == this.select[y]) {
            this.tag_list[i].select = true;
          }
        }
      }
    }
  }
};
</script>

<style>
.com-list{
    width: 50%;
    margin-bottom: 10px;
}
.tag-btn {
  margin-top: 10px;
  margin-left: 0 !important;
  margin-right: 10px;
}
</style>